<template>
  <!-- 轮播图 -->
<div class="banner" >
	<div class="banner_bg"></div>
	<div class="banner_wrap">
		<!-- 加上v-if="banner_data.length > 1" 来防止swiper出现无法循环播放的效果 -->
		<swiper :options="swiperOption" v-if="bannerList.length>1"  class="banner-swiper-container swiper-container" style="border-radius: 0.15rem;">
			<swiper-slide class="swiper-wrapper" v-for="(item, index) in bannerList" :key="index">
				<a href="" style="border-radius: 0.15rem;">
					<img :src="item.image" :alt="item.title">
				</a>
			</swiper-slide>
		</swiper>
	</div>
</div>
</template>

<script>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper';
export default{
	components:{
	    swiper,
	    swiperSlide
	},
	name:'Index',
	data(){
		return {
			
			// 轮播图
			bannerList: [],        //图片列表
			swiperOption: {
				observeParents:true,
				pagination: '.swiper-pagination',
				paginationClickable: true,		//分页可点击
				slidesPerView: 1,		//每次滑动图片一张
		        slidesPerGroup: 1,		//每个div只有一张图片
				loop: true,				//false 不循环    true循环
				// grabCursor: true,	//鼠标光标
		       	autoplay: {
		        	delay: 2000,		//秒
		        	stopOnLastSlide: false,
		            disableOnInteraction: false,//滑动不会失效
		        },
			},
		}
	},
	
}
</script>

<style>

</style>